<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config" @rightClick="rightClick"></header-bar>
        <tab-bar
            :tabs="tabs"
            @clickTab="clickTab"
            :tabIndex="tabIndex"
            lineWidth="300rpx"
            background="#ffffff"></tab-bar>
        <view class="main">
            <swiper
                v-if="loadOk"
                class="swiper"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item>
                    <purchase-wait-list
                        ref="purchaseWaitList"
                        :height="listHeight"
                        @totalBack="waitTotalBack"></purchase-wait-list>
                </swiper-item>
                <swiper-item>
                    <purchase-list ref="purchaseList" :height="listHeight" @totalBack="totalBack"></purchase-list>
                </swiper-item>
            </swiper>
        </view>
        <view class="bottom-bar action-bottom-bar">
            <purchase-action></purchase-action>
        </view>
    </view>
</template>

<script>
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "@/components/common/tab-bar.vue"
import purchaseWaitList from "@/pages_work/components/purchase/purchase-wait-list.vue"
import purchaseList from "@/pages_work/components/purchase/purchase-list.vue"
import purchaseAction from "@/pages_work/components/purchase/purchase-action.vue"
export default {
    components: {
        purchaseWaitList,
        purchaseList,
        tabBar,
        purchaseAction,
    },
    data() {
        return {
            config: {
                title: "采购入库",
                centerSlot: true,
                rightSlot: false,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        type: "scan",
                    },
                ],
            },
            listHeight: "",
            loadOk: false,
            tabIndex: 0,
            tabs: [
                {
                    title: "待入库",
                },
                {
                    title: "已入库",
                },
            ],
            waitTotal: 0,
            total: 0,
        }
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, mainColor]
    },
    mounted() {
        this.getListHeight()
    },
    onShow() {},
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e - 70 + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                    this.upTab()
                }, 20)
            }
        },
        rightClick(e) {
            console.log(e)
            if (e.id == 1) {
                //扫一扫
                // this.scan()
                this.easyGoTo("/pages_work/packet/purchase/confirm?id=1)")
            }
        },

        waitTotalBack(e) {
            this.waitTotal = e
            this.upTab()
        },
        totalBack(e) {
            this.total = e
            this.upTab()
        },
        upTab() {
            let tabs = [
                {
                    title: "待入库",
                },
                {
                    title: "已入库",
                },
            ]
            if (this.tabIndex == 0) {
                tabs[0].title += `(${this.waitTotal})`
            } else {
                tabs[1].title += `(${this.total})`
            }
            this.tabs = tabs
            this.$forceUpdate()
        },
    },
}
</script>

<style lang="scss"></style>
